<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>修改密码</title>
    <th:block th:include="~{common/common::commonHead}"/>
</head>
<body>

<div class=".container" style="margin-top:100px;width:250%;">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">账户</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" style="width:250px;" id="username" placeholder="需要修改的用户名" th:value="${loginName}" readonly>
                <span id="usernameTip" style="display:none;color:red;"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="oldpass" class="col-sm-2 control-label">旧密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" style="width:250px;" id="oldpass" placeholder="输入当前密码">
                <span id="oldpassTip" style="display:none;color:red;"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="newpass" class="col-sm-2 control-label">新密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" style="width:250px;" id="newpass" placeholder="输入新密码">
                <span id="newpassTip" style="display:none;color:red;"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="newpassAgain" class="col-sm-2 control-label">再次确认新密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" style="width:250px;" id="newpassAgain" placeholder="确认新密码">
                <span id="newpassAgainTip" style="display:none;color:red;"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"> </label>
            <button type="submit" class="btn"  style="margin-left: 15px" onClick="javascript:history.back(-1);">取消</button>
            <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 15px">确认修改</button>

        </div>
    </form>
</div>
<div id="modifySuccess" class="alert alert-success alert-dismissable" style="width:50%;margin-left:40%;display:none;">
    <strong>Success!</strong> 你已成功修改密码！
</div>
<script type="text/javascript">
        $(function(){
        var error = false;
        $("#username").click(function(){
        });
        $("#username").blur(function(){
            var username = $("#username").val();
            if(username === '') {
                showError('username', '账户不能为空');
                error = true;
                return;
            }

            $.post("modifyPassProcess.php", {flag:1, username:username}, function(data){
                if(data) {
                    $("#username").css({"border-color":"green"});
                    $("#usernameTip").css({"display":"none"});
                } else {
                    showError('username', '账户不存在');
                    error = true;
                }
            });
        });

        $("#oldpass").on("blur",function(){
            var username = $("#username").val();
            if(username==='') {
                showError('username', '账户不能为空');
                error = true;
                return;
            }

            var oldpass = $("#oldpass").val();
            var scb =function(){
                $("#oldpass").css({"border-color": "green"});
                $("#oldpassTip").css({"display": "none"});
            };
            var ecb =function(){
                showError('oldpass', '密码错误');
                error = true;
            };
            if(oldpass ==='') {
                showError('oldpass', '密码不能为空');
                error = true;
                return;
            }
             $.doAjax("auth/validatePassword",{"password":oldpass},scb,ecb);
            });
        $("#oldpass").on("focus",function(){
            hide('oldpass');
        });
        $("#newpass").blur(function(){
            var newpass = $("#newpass").val();
            if(newpass === '') {
                showError('newpass', '新密码不能为空');
                error = true;
            }
            else {
                $("#newpass").css({"border-color":"green"});
                $("#newpassTip").css({"display":"none"});
            }
        });
        $("#newpass").on("focus",function(){
            hide('newpass');
        });
        $("#newpassAgain").blur(function(){
            var newpass = $("#newpass").val();
            if(newpass === '') {
                showError('newpass', '新密码不能为空');
                error = true;
                return;
            }

            var newpassAgain = $("#newpassAgain").val();
            if(newpassAgain != newpass) {
                showError('newpassAgain', '与输入的新密码不一致');
                error = true;
            }
            else {
                $("#newpassAgain").css({"border-color":"green"});
                $("#newpassAgainTip").css({"display":"none"});
            }
        });
        $("#newpassAgain").on("focus",function(){
            hide('newpassAgain');
            });
        $("#submit").click(function(event){
            $("#username").blur();
            $("#oldpass").blur();
            $("#newpass").blur();
            $("#newpassAgain").blur();
            if(!error) {
                var newpass = $("#newpass").val();
                $.doAjax("auth/checkPassword", {"newPassword": newpass}, function () {
                    $("#modifySuccess").css({'display': 'inline'});
                    alert(baseUrl);
                    window.location.href = baseUrl + "login.html";
                });
            }

            event.preventDefault();
            return false;
        });
    });

    function showError(formSpan, errorText) {
        $("#" + formSpan).css({"border-color":"red"});
        $("#" + formSpan + "Tip").empty();
        $("#" + formSpan + "Tip").append(errorText);
        $("#" + formSpan + "Tip").css({"display":"inline"});
    }
    function hide(formSpan){
        $("#"+formSpan).css({"border-color":"#eee"});
        $("#" + formSpan + "Tip").css({"display":"none"});
    }
</script>
</body>
</html>
